import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import LocaleExamples from '../../../example-groups/LocaleExamples';

<Head>
  <title>{'Localization/i18n Guide - Mantine React Table V2 Docs'}</title>
  <meta
    name="description"
    content="How to customize localization and translations (i18n) in Mantine React Table"
  />
</Head>

## Localization (i18n) Guide

Mantine React Table has full support for localization (i18n). Some locales are included by default, but if your language is not yet supported, you can still easily add your own custom translations to the `localization` table option.

### Relevant Table Options

<TableOptionsTable onlyOptions={new Set(['localization'])} />

### Built-in Locales

The following locales are included and can be imported from `'mantine-react-table/locales/'`:

`am`, `ar`, `az`, `bg`, `cs`, `da`, `de`, `en`, `es`, `et`, `fa`, `fi`, `fr`, `hu`, `he`, `hy`, `id`, `it`, `ja`, `ko`, `nl`, `no`, `np`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cyrl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant`

> If your language is not yet supported, please consider making a PR to add it to the library! See [here on GitHub](https://github.com/KevinVandy/mantine-react-table/tree/v2/packages/mantine-react-table/src/locales).

#### Built-in Locale Examples

Scroll and find your language below to see an example of how to use it.

<LocaleExamples />

> Note: In some frameworks like Remix, you may need to use a full import path like <br /> `import { MRT_Localization_ES } from 'mantine-react-table/locales/es/index.js';` or <br /> `import { MRT_Localization_ES } from 'mantine-react-table/locales/es/index.esm.js';` <br />
> to properly import the locale.

### Custom Non-Built-In Translations

If you want to use a language that is not included in the library, you can still easily add your own custom translations to the `localization` table option.

```jsx
const table = useMantineReactTable({
  columns,
  data,
  localization: {
    actions: 'Ações',
    and: 'e',
    cancel: 'Cancelar',
    changeFilterMode: 'Alterar o modo de filtro',
    changeSearchMode: 'Alterar o modo de pesquisa',
    clearFilter: 'Limpar filtros',
    clearSearch: 'Limpar pesquisa',
    clearSort: 'Limpar classificações',
    clickToCopy: 'Clique para copiar',
    // ... and many more - see link below for full list of translation keys
  },
});

return <MantineReactTable table={table} />;
```

For a full list of all available translation keys, see [here](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/locales/en.ts)

If you end up fully translating MRT into another language that is not yet supported, please consider making a PR to add it to the library so that everyone can use it!
